<template>
  <div class="demo">
    <p class="excample-text">{{this.choosedDay2.dateFormat}}  星期{{this.choosedDay2.day}}</p>
    <vue-horizontal-calendar
        v-on:change="dateChange2"
        choosedItemColor="rgb(245, 101, 124)"
        todayItemColor="rgb(245, 101, 124, .1)"
        swipeSpace="3"
        sundayText="天"
        v-bind:showBorderTop="true"
    ></vue-horizontal-calendar>
  </div>
</template>

<script>
import VueHorizontalCalendar from 'vue-horizontal-calendar';

export default {
  components: {
    VueHorizontalCalendar
  },
  data() {
    return {
      choosedDay2: {
        dateFormat: "",
        year: "",
        month: "",
        date: "",
        day: "",
        timestamp: ""
      },
    }
  },
  methods: {
    dateChange2(day) {
      this.choosedDay2 = day;
    },
  },
}
</script>
<style>
.excample-text {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
</style>
